<style lang="scss" scoped>
    @import '../../css/study-plan.scss';
    .head-tab-box{padding: 18px 20px;background: #fff;margin-bottom: 8px;}
    .head-tab-box span{margin-right: 30px;cursor: pointer;font-size: 14px;}
    .head-tab-checked{color: $mco;border-bottom: 3px solid $mco;}
    .main-content{padding: 0 100px 50px 30px;background: #fff;}
    .paper-title{font-size: 18px;font-weight: bold;padding: 30px 0 0 0;}
    .question-title{padding: 34px 0 0 0;}
    .question-item{padding: 16px 0 16px 24px;}
    .question-item>span{float: left;}
    .question-item>p{padding-left: 30px;}
    .per-box{padding: 0 0 0 24px;}
    .per-box>div{width: 94%;float: left;margin-top: 4px;}
    .per-box>span{text-align: right;width: 6%;float: left;}
    .q3-box{border:1px solid #eee;margin: 24px 0 0 24px;}
    .q3-head{padding: 18px 0;background: #fcfdff;border-bottom: 1px solid #eee;}
    .q3-name{display: inline-block;width: 12%;text-align: center;}
    .q3-body{padding: 18px 0;}
    .q3-body>span{display: inline-block;text-align: center;width: 12%;vertical-align: middle;}
    .q3-body>p{display: inline-block;width: 86%;vertical-align: middle;}

    .paper-info-main{padding: 26px 40px 80px;min-height:600px;background: #fff;}
    .info-head{font-size: 18px;font-weight: bold;padding-bottom: 16px;}
    .info-head>span{line-height: 30px;float: left;}
    .info-main-content{text-align: center;border: 1px solid #eee;}
    .info-main-title{padding: 18px 0;background: #fcfdff;border-bottom: 1px solid #eee;}
    .info-main{padding: 18px 0}
    .student-input-box{float: right;}
    .see-text{color: $mco;cursor: pointer;}
</style>

<template>
    <section>
        <div class="breadcrumb-box">
            <el-breadcrumb separator=" > ">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-if="$route.meta">{{$route.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="head-tab-box">
            <span :class="{'head-tab-checked':headTabID==1}" @click="headTabID=1">汇总统计</span>
            <span :class="{'head-tab-checked':headTabID==2}" @click="toSingle">单人统计</span>
        </div>
        <div v-show="headTabID==1" class="main-content">
            <div class="paper-box">
                <div class="paper-title">{{examTitle}}</div>
                <template v-for="item,index in list">
                    <div class="question-title">Q{{index+1}}【{{item.QuestionType==2?'单选题':item.QuestionType==1?'多选题':'主观题'}}】{{item.QuestionTitle}}</div>
                    <ul v-if="item.QuestionType!=3">
                        <template v-for="res,index1 in item.Answers">
                            <li>
                                <div class="question-item clearfix"><span>{{letterList[index1]}}</span><p class="res-box">{{res.AnswerValue}}</p></div>
                                <div class="per-box clearfix">
                                    <div>
                                        <el-progress :percentage="parseInt(res.SelectRateString)"></el-progress>
                                    </div>
                                    <span>({{res.SelectNum}})</span>
                                </div>
                            </li>
                        </template>
                    </ul>
                    <ul v-if="item.QuestionType==3" class="q3-box">
                        <li class="q3-head">
                            <span class="q3-name">学员名称</span>
                            <span class="q3-answer">回答</span>
                        </li>
                        <template v-for="res in item.MemberAnswers">
                            <li class="q3-body clearfix">
                                <span>{{res.Username}}</span>
                                <p>{{res.SubmitAnswer}}</p>
                            </li>
                        </template>
                    </ul>
                </template>
            </div>
        </div>

        <div v-show="headTabID==2" class="paper-info-main" >
            <div class="info-head clearfix">
                <span>{{examTitle}}</span>
                <div class="my-resource-input-box fr">
                    <el-input placeholder="搜索学员" v-model="searchContent" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="getMemberList()"></el-button>
                    </el-input>
                </div>
            </div>
            <div class="info-main-content">
                <el-row class="info-main-title">
                    <el-col :span="6"><div class="car-title">序号</div></el-col>
                    <el-col :span="6"><div class="car-title">学员名字</div></el-col>
                    <el-col :span="6"><div class="car-title">提交时间</div></el-col>
                    <el-col :span="6"><div class="car-title">详情</div></el-col>
                </el-row>
                <template v-for="one,index in memberList">
                    <el-row class="info-main">
                        <el-col :span="6">{{index+1}}</el-col>
                        <el-col :span="6">{{one.Username}}</el-col>
                        <el-col :span="6">{{one.ExamStatus==0?'-':one.SubmitTime}}</el-col>
                        <el-col :span="6">
                            <span v-show="one.ExamStatus!=0" class="see-text" @click="gotoPath('/study/questionnaire-info?examID='+examID+'&employeeID='+one.EmployeeID+'&studyTitle='+examTitle)">查看</span>
                            <span v-show="one.ExamStatus==0">-</span>
                        </el-col>
                    </el-row>
                </template>


            </div>
        </div>
    </section>

</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            examID:this.$route.query.examID,
            examTitle:'',
            headTabID:1,

            list:[],
            letterList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q'],
            memberList:[
                {
                    "Username": "rick",
                    "Aliasname": "",
                    "SubmitTime": "2017-12-13 10:12:42"
                },
                {
                    "Username": "rick",
                    "Aliasname": "",
                    "SubmitTime": "2017-12-13 10:12:42"
                }
            ],
            searchContent:''
        }
    },
    mixins: [mixinMethods],
    methods: {
        toSingle(){
            this.headTabID = 2;
        },
        getMemberList(){
            axios.post('/com/exam/getQNRExamResultList', qs.stringify({
                examID:this.examID,
                keywords:this.searchContent
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.memberList = d.data.List.Rows;
                }else {
                    this.$message.error(d.msg)
                }
            })
        }
    },
    mounted: function(){
        axios.post('/com/exam/getQNRResult', qs.stringify({
            examID:this.examID
        })).then((res) => {
            var d = res.data;
            if(d.flag == 1){
                this.examTitle = d.data.ExamTitle;
                this.list = d.data.List;
            }else {
                this.$message.error(d.msg)
            }
        })
        this.getMemberList();
    }
}


</script>